<!--
 * @Author: 郑堪侠
 * @Date: 2022-11-18 10:27:06
 * @LastEditTime: 2022-11-21 15:26:20
 * @FilePath: \commonTemplated:\3\安卓HTML\ganwei-app\src\components\appFrame\top.vue
 * @Description: 内容描述
 * Copyright (c) 2022 by 敢为软件, All Rights Reserved.
-->
<template>
    <div class="appTop flex-between-center" :class="{scrollable: scrollable, marginBottom: !leftText}">
        <div class="left">
            <!-- <div v-if="leftText" :style="{fontSize:titleSize+'px'}">
                {{leftText}}
            </div> -->
            <slot name="header-left"></slot>
            <div v-if="leftText" class="leftText">
                {{leftText}}
            </div>
            <div class='leftIcon' v-if="leftIcon" @click="back">
                <i class="iconfont" :style="{fontSize:leftIconSize+'px'}" :class="leftIcon"></i>
            </div>
        </div>
        <div class="center">
            <div v-if="centerText" class="topTitle" :style="{fontSize:titleSize+'px'}">{{centerText}}</div>
            <slot name="header-center"></slot>
        </div>
        <div class="right iconInfo flex-between-center flex-column" @click="$emit('rightClick')">
            <i v-if="rightIcon" :class='rightIcon' :style="{fontSize:rightIconSize+'px'}" class="iconfont"></i>
            <span v-if="rightIconTip" :style="{fontSize:rightIconTipSize+'px',color:rightIconTipColor}" class='iconTip'>{{rightIconTip}}</span>
            <slot name="header-right"></slot>
        </div>
        <qrcode :qrcode="qrcode" v-show="qrcode" :camera="camera" @changeCamera="changeCamera" @changeQrcode="changeQrcode" @onRichScanCallback="onRichScanCallback"/>
    </div>
</template>

<script>

const qrcode = () => import('@/components/qrcodeReader/qrcodeReader')
export default {
    components: { qrcode },
    props: {
        leftText: {
            type: String,
            default: ''
        },
        leftIcon: {
            type: String,
            default: ''
        },
        leftIconSize: {
            type: String,
            default: '18'
        },
        centerText: {
            type: String,
            require: true
        },
        titleSize: {
            type: String,
            default: '18'
        },
        rightIcon: {
            type: String,
            default: ''
        },
        rightIconSize: {
            type: String,
            default: '30'
        },
        rightIconTip: {
            type: String,
            default: ''
        },
        rightIconTipSize: {
            type: String,
            default: '10'
        },
        rightIconTipColor: {
            type: String,
            default: ''
        },
        scrollable: {
            type: Boolean,
            default: false
        },
        qrcode: {
            type: Boolean,
            default: false
        },
        camera: {
            type: String,
            default: 'off'
        }
    },
    watch: {
        qrcode (newvalue, oldvalue) {
            this.qrcode = newvalue;
        },
        camera (newvalue, oldvalue) {
            this.camera = newvalue;
        }
    },
    methods: {
        back () {
            this.$router.back(-1)
        },

        // // 扫码结果回调
        // onDecode (result) {

        //     // result, 扫描结果，可以根据自己的需求来实现相应的功能
        //     this.turnCameraOff()
        //     this.$router.push({ path: '/index/scanResults', query: { assetInfo: result } });
        // },

        // // 关闭相机
        // turnCameraOff () {

        //     this.$emit('changeCamera', 'off')
        //     this.$emit('changeQrcode', false)
        // },

        // // 检查是否调用摄像头
        // async onInit (promise) {

        // }

        changeCamera(e) {
            this.$emit('changeCamera', e)
        },

        changeQrcode(e) {
            this.$emit('changeQrcode', e)
        },

        onRichScanCallback(res) {
            this.$emit('onRichScanCallback', res)
        }
    }
}
</script>

<style lang='scss' src='./css/top.scss'>
</style>
